<template>
  <Grid
    :data-items="products"
    :filterable="true"
    :filter="filter"
    :columns="columns"
    :loader="loader"
    @filterchange="filterChange"
  />
</template>
<script>
  import { Grid } from '@progress/kendo-vue-grid'
  import { filterBy } from '@progress/kendo-data-query'
  import { sampleProducts } from './products'

  export default {
    components: {
      Grid
    },
    data: function() {
      return {
        loader: false,
        uniqueData: null,
        filter: {
          logic: 'and',
          filters: []
        }
      }
    },
    computed: {
      products: function() {
        return filterBy(sampleProducts, this.filter)
      },
      columns: function() {
        return [
          {
            field: 'ProductID',
            filterable: false,
            title: 'ID',
            width: '50px'
          },
          { field: 'ProductName', title: 'Product Name' },
          {
            field: 'Category.CategoryName',
            title: 'Category',
            filterCell: 'filterSlotTemplate'
          }
        ]
      }
    },
    created() {
      this.uniqueData = sampleProducts
        .map((x) => x.Category)
        .filter(
          (x, idx, xs) =>
            xs.findIndex((y) => y.CategoryName === x.CategoryName) === idx
        )
    },
    methods: {
      filterChange: function(ev) {
        this.loader = true
        // The idea behind using the following setTimeout method is to
        // demonstrate how we can show a loader while fetching data.
        // In real-life scenarios with remote data binding, the 'loader'
        // property should be updated before making a server request
        // and after the request completes.
        setTimeout(() => {
          this.filter = ev.filter
          this.loader = false
        }, 300)
      }
    }
  }
</script>
